<template>
  <view class="available-overtime-card">
    <view class="overtime-list">
      <view 
        v-for="(item, index) in overtimeList" 
        :key="item.ID || index"
        class="overtime-item"
      >
        <view class="item-header">
          <text class="bill-code">{{ item.BillCode || '无单号' }}</text>
          <text class="compensation-type">{{ item.CompensationType || '等时调休' }}</text>
        </view>
        
        <view class="item-content">
          <view class="info-row">
            <view class="info-item full-width">
              <text class="label">姓名:</text>
              <text class="value">{{ item.Name || '未知' }}</text>
            </view>
          </view>
          
          <view class="info-row">
            <view class="info-item full-width">
              <text class="label">工号:</text>
              <text class="value">{{ item.StaffNo || '未知' }}</text>
            </view>
          </view>
          
          <view class="info-row">
            <view class="info-item full-width">
              <text class="label">加班时长(小时):</text>
              <text class="value">{{ item.OvertimeHours || 0 }}</text>
            </view>
          </view>
          
          <view class="info-row">
            <view class="info-item full-width">
              <text class="label">剩余可用时长(小时):</text>
              <text class="value remaining-hours">{{ item.RemainingCompOffHours || 0 }}</text>
            </view>
          </view>
          
          <view class="info-row">
            <view class="info-item full-width">
              <text class="label">已调休时长(小时):</text>
              <view class="edit-container">
                <input 
                  v-if="editingItems[item.ID]"
                  v-model="editingValues[item.ID]"
                  class="edit-input"
                  type="number"
                  :placeholder="String(item.UsedCompOffHours || 0)"
                  @blur="validateInput(item)"
                />
                <text v-else class="value">{{ item.UsedCompOffHours || 0 }}</text>
                <button 
                  class="edit-btn"
                  :class="{ 'save-btn': editingItems[item.ID] }"
                  @click="toggleEdit(item)"
                >
                  {{ editingItems[item.ID] ? '保存' : '编辑' }}
                </button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <view v-if="!overtimeList || overtimeList.length === 0" class="empty-state">
      <text class="empty-text">暂无可用加班记录</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';

// Props
interface OvertimeRecord {
  ID: string;
  BillCode: string;
  CompensationType: string;
  Name: string;
  StaffNo: string;
  OvertimeHours: number;
  RemainingCompOffHours: number;
  UsedCompOffHours: number;
}

interface Props {
  overtimeList: OvertimeRecord[];
}

const props = withDefaults(defineProps<Props>(), {
  overtimeList: () => []
});

// Emits
const emit = defineEmits<{
  updateCompOffHours: [id: string, hours: number];
}>();

// 编辑状态管理
const editingItems = ref<Record<string, boolean>>({});
const editingValues = ref<Record<string, string>>({});

// 切换编辑状态
const toggleEdit = (item: OvertimeRecord) => {
  const itemId = item.ID;
  
  if (editingItems.value[itemId]) {
    // 保存操作
    const newUsedHours = parseFloat(editingValues.value[itemId] || '0');
    const maxUsedHours = (item.RemainingCompOffHours || 0) + 3; // 最大不能超过剩余可用时长+3
    
    if (newUsedHours > maxUsedHours) {
      uni.showToast({
        title: `已调休时长不能超过${maxUsedHours}小时`,
        icon: 'none'
      });
      return;
    }
    
    if (newUsedHours < 0) {
      uni.showToast({
        title: '已调休时长不能为负数',
        icon: 'none'
      });
      return;
    }
    
    // 直接发送已调休时长更新事件
    emit('updateCompOffHours', itemId, newUsedHours);
    
    // 退出编辑状态
    editingItems.value[itemId] = false;
    delete editingValues.value[itemId];
  } else {
    // 进入编辑状态
    editingItems.value[itemId] = true;
    editingValues.value[itemId] = String(item.UsedCompOffHours || 0);
  }
};

// 验证输入
const validateInput = (item: OvertimeRecord) => {
  const itemId = item.ID;
  const value = parseFloat(editingValues.value[itemId] || '0');
  const maxValue = (item.RemainingCompOffHours || 0) + 3; // 最大不能超过剩余可用时长+3
  
  if (value > maxValue) {
    editingValues.value[itemId] = String(maxValue);
  } else if (value < 0) {
    editingValues.value[itemId] = '0';
  }
};

// 监听数据变化，重置编辑状态
watch(() => props.overtimeList, () => {
  editingItems.value = {};
  editingValues.value = {};
}, { deep: true });
</script>

<style lang="scss" scoped>
.available-overtime-card {
  background: #ffffff;
  border-radius: 12px;
  margin: 16px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.overtime-list {
  padding: 0;
}

.overtime-item {
  border-bottom: 1px solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 8px;
  background: #f8f9fa;
  
  .bill-code {
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
  
  .compensation-type {
    font-size: 12px;
    color: #666;
    background: #e3f2fd;
    padding: 2px 8px;
    border-radius: 12px;
  }
}

.item-content {
  padding: 12px 16px;
}

.info-row {
  display: flex;
  margin-bottom: 6px;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.info-item {
  flex: 1;
  display: flex;
  align-items: center;
  
  &.full-width {
    flex: none;
    width: 100%;
  }
  
  .label {
    font-size: 14px;
    color: #666;
    margin-right: 8px;
    min-width: 80px;
  }
  
  .value {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    
    &.remaining-hours {
      color: #4caf50;
      font-weight: 600;
    }
  }
}

.edit-container {
  display: flex;
  align-items: center;
  flex: 1;
  
  .edit-input {
    flex: 1;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    margin-right: 8px;
  }
  
  .edit-btn {
    height: 32px;
    padding: 0 12px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    
    &.save-btn {
      background: #4caf50;
    }
    
    &:active {
      opacity: 0.8;
    }
  }
}

.empty-state {
  padding: 40px 16px;
  text-align: center;
  
  .empty-text {
    font-size: 14px;
    color: #999;
  }
}
</style>
